<template>
  <div style="padding:20px;width:100%">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="编辑商品" name="编辑商品">
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">所属商品</div>
          <div style="width:300px">
            <el-select v-model="discountWay" placeholder="请选择" class="c-box-flex" clearable>
              <el-option label="折扣" value="1"></el-option>
              <el-option label="满减" value="2"></el-option>
              <el-option label="优惠券" value="3"></el-option>
            </el-select>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品类别</div>
          <div style="width:300px">
            <el-select v-model="discountWay" placeholder="请选择" class="c-box-flex" clearable>
              <el-option label="折扣" value="1"></el-option>
              <el-option label="满减" value="2"></el-option>
              <el-option label="优惠券" value="3"></el-option>
            </el-select>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品品牌</div>
          <div style="width:300px">
            <el-select v-model="discountWay" placeholder="请选择" class="c-box-flex" clearable>
              <el-option label="折扣" value="1"></el-option>
              <el-option label="满减" value="2"></el-option>
              <el-option label="优惠券" value="3"></el-option>
            </el-select>
          </div>
        </div>

        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品名称</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入商品名称" v-model="orderNumber" clearable></el-input>
          </div>
        </div>

        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品副标题</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入商品副标题" v-model="orderNumber" clearable></el-input>
          </div>
        </div>

        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">上架内容</div>
          <div style="width:300px">
            <el-radio-group v-model="radio2">
              <el-radio :label="3">轮播图</el-radio>
              <el-radio :label="6">详情图</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">图片上传</div>
          <div v-if="radio2==3">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div v-if="radio2==6">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </div>

        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品价格</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入商品价格" v-model="orderNumber" clearable></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品库存</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入商品库存" v-model="orderNumber" clearable></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品基础销量</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入商品基础销量" v-model="orderNumber" clearable></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">是否支持退款</div>
          <div style="width:300px">
            <el-switch v-model="value2" active-text="是" inactive-text="否"></el-switch>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">是否立即上架</div>
          <div style="width:300px">
            <el-switch v-model="value2" active-text="是" inactive-text="否"></el-switch>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="添加规格" name="添加规格">
        <div class="c-flex mb15">
          <div class="c-box-flex vh"></div>
          <div>
            <el-button type="primary" @click="search">新增</el-button>
          </div>
        </div>
        <el-table :data="List" style="width: 100%" :max-height="maxHeight" border>
          <el-table-column prop="orderNumber" label="规格名称"></el-table-column>
          <el-table-column prop="goodsName" label="成本价（元）"></el-table-column>
          <el-table-column prop="goodsNum" label="售价（元）"></el-table-column>
          <el-table-column prop="goodsPrice" label="库存（件）"></el-table-column>
          <el-table-column prop="memberPrice" label="操作"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="新增规格" :visible.sync="dialogVisible" width="50%">
      <div ref="table">
        <el-table :data="orderList" style="width: 100%" max-height="600" border>
          <el-table-column prop="orderNumber" label="规格名称"></el-table-column>
          <el-table-column prop="goodsName" label="成本价（元）"></el-table-column>
          <el-table-column prop="goodsNum" label="售价（元）"></el-table-column>
          <el-table-column prop="goodsPrice" label="库存（件）"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //列表相关
      pageTotal: null,
      currentPage: 1,
      pageSize: 20,
      maxHeight: null,
      List: [],

      time: [],
      activeName: "编辑商品",
      discountWay: null,
      radio2: 3,
      orderNumber: null,
      value2: true,
      dialogVisible: false,
      orderList: []
    };
  },
  mounted() {},

  methods: {
    handleClick() {},
    search() {
      this.$router.push({
        path: "/gameAccount?name=年文静"
      });
    }
  }
};
</script>
<style lang="less" scoped>
.label {
  width: 100px;
  text-align: right;
}
</style>
